<template>
  <div class="header">
  	 <router-link class= "header-abs"
  	              tag= "div"
  	              to="/" 
  	              v-show= "showHeader">
  	 	<span class="iconfont header-back-abs">&#xe624;</span>
  	 </router-link>
  	 <div class="header-fixed"
           v-show= "!showHeader"
           :style = "fixedStyle">
  	    <router-link to="/">
          <span class="iconfont header-back-fixed">&#xe624;</span>
        </router-link>
         大连圣亚海洋世界         
  	 </div>
  </div>
</template>
<script>
export default{
	name : 'DetailBanner',
	data () {
		return {
			showHeader: true,
			fixedStyle :{
				opacity: 0
			}
		}
	},
	methods : {
	  handleScroll () {
        const top = document.documentElement.scrollTop
        if(top > 60){
        	let opacity = (top /140)
        	opacity = opacity > 1 ? 1 : opacity
        	this.fixedStyle={ opacity }
        	this.showHeader = false
        }else{
        	this.showHeader = true
        }

    }
  },
	activated () {
		window.addEventListener('scroll', this.handleScroll)
	},
	deactivated () {
		window.removeEventListener('scroll', this.handleScroll)
	}
}
</script>
<style  lang="stylus" scoped>
@import '~styles/varibles.styl'
.header-abs
   position: absolute
   top: .2rem
   left: .2rem
   width: .8rem
   height: .8rem 
   line-height: .8rem
   border-radius: .4rem
   text-align: center
   background: rgba(0, 0, 0, .6)
   .header-back-abs
     color:#fff
     font-size: .4rem
 .header-fixed
     z-index:2
     position: fixed
     top: 0
     left: 0
     right: 0
     line-height :$headerHight
     background :$bgColor
     color:#fff
     text-align: center
     font-size: .32rem
     .header-back-fixed
       color:#fff
       font-size: .32rem
       position: absolute
       left: .2rem
</style>